<!-- 视频播放器：使用Vue-Video-Player -->
<!-- 参考：https://github.com/surmon-china/videojs-player -->
<template>
  <video-player
    v-if="videoFileId && videoFileId > 0x0"
    class="video-player vjs-custom-skin"
    :src="videoFileSrc"
    :poster="videoPosterUrl"
    :options="videoPlayerOptions"
    @play="onPlayerPlay"
    @pause="onPlayerPause"
    @ended="onPlayerEnded"
  ></video-player>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, onUnmounted } from 'vue';

  //导入vue3-video-player
  import { VideoPlayer } from '@videojs-player/vue';
  import 'video.js/dist/video-js.css';

  export default defineComponent({
    name: 'VideoPlayer',
    props: {
      fileId: {
        //文件ID，用于识别是否传入了文件，未传入文件时不进行加载
        type: Number as PropType<number>,
      },
      src: {
        //播放的视频文件完整url
        type: String as PropType<string>,
      },
      poster: {
        //视频文件封面图片文件完整url
        type: String as PropType<string>,
      },
      options: {
        //视频播放器的选项，可以由外部组件传入
      },
    },
    components: { VideoPlayer },
    setup(props, { emit }) {
      console.log('VideoPlayer setup props', props);

      const videoFileId = ref<number>(0x0);
      const videoFileSrc = ref<string>();
      const videoPosterUrl = ref<string>();
      const videoPlayerOptions = ref();

      //默认播放器options
      const defaultOptions = {
        autoplay: true,
        controls: true,
      };

      function onPlayerPlay() {
        console.log('Video is playing');
      }

      function onPlayerPause() {
        console.log('Video is paused');
      }

      function onPlayerEnded() {
        console.log('Video has ended');
      }

      onMounted(() => {
        console.log('VideoPlayer onMounted props', props);
        if (props && props.fileId && props.fileId > 0x0) {
          console.log('VideoPlayer onMounted props.fileId', props.fileId);
          //传入的文件有效时才进行赋值
          videoFileId.value = props.fileId;
          if (props.src) videoFileSrc.value = props.src;
          if (props.poster) videoPosterUrl.value = props.poster;
          // if (props.options)
          // videoPlayerOptions.value = { ...defaultOptions, props.options };
        }
      });

      onUnmounted(() => {
        console.log('VideoPlayer onUnmounted');
      });

      return {
        videoFileId,
        videoFileSrc,
        videoPosterUrl,
        videoPlayerOptions,
        onPlayerPlay,
        onPlayerPause,
        onPlayerEnded,
      };
    },
  });
</script>
<style scoped>
  .vjs-custom-skin {
  }
</style>
